import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { Radio, Input, Select, message } from 'antd';
import CustomDatePicker from '@/components/CustomDatePicker';
import EffLineChart from './components/EffLineChart';
import style from '@/pages/IndexPage.css';

const { Search } = Input;
function EffManager({ dispatch, user, mach }){
    const { theme } = user;
    const { effInfo, machList, machTypes, paramInfo, currentMach, machParams, currentParam } = mach;
    async function init(){
        await dispatch({ type:'mach/fetchMachList', payload:{ pageSize:999 }});
        await dispatch({ type:'mach/fetchMachParams'});
        dispatch({ type:'mach/fetchMachEffInfo'});
        dispatch({ type:'mach/fetchMachParamInfo'});
    }
    useEffect(()=>{   
        init();
    },[]);
   
    return (
        <div className={style['page-container']}>
                <div className={style['card-container-wrapper']} style={{ width:'20%', paddingBottom:'0' }}>
                    <div className={style['card-container']} style={{ padding:'0 1rem' }}>
                        <div style={{ margin:'0.5rem 0'}}><Search placeholder='输入设备名查询' allowClear enterButton onSearch={(value)=>{
                            if ( value ) {
                                dispatch({ type:'mach/setOptional', payload:{ meterName:value }});
                                init();
                            } 
                        }} /></div>
                        <div className={style['custom-list']}>
                            {
                                machList.map(item=>(
                                    <div className={style['custom-list-item'] + ' ' + ( currentMach.machId === item.machId ? style['selected'] : '' )} onClick={()=>{
                                        dispatch({ type:'mach/setCurrentMach', payload:item });
                                        new Promise((resolve, reject)=>{
                                            dispatch({ type:'mach/fetchMachParams', payload:{ resolve, reject }});
                                        })
                                        .then(()=>{
                                            dispatch({ type:'mach/fetchMachEffInfo' });
                                            dispatch({ type:'mach/fetchMachParamInfo'});
                                        })
                                    }}>{ item.meterName }</div>
                                ))
                            }
                        </div>
                    </div>
                </div>
                <div className={style['card-container-wrapper']} style={{ width:'80%', paddingRight:'0', paddingBottom:'0' }}>
                    <div style={{ height:'40px', display:'flex' }}>
                        <Select
                            className={style['custom-select']}
                            style={{ width:'160px', marginRight:'1rem' }}
                            value={currentParam.metricsId}
                            onChange={(key)=>{
                                let obj = machParams.filter(i=>i.metricsId === key)[0];
                                dispatch({ type:'mach/setCurrentParam', payload:obj });
                                dispatch({ type:'mach/fetchMachEffInfo'});
                                dispatch({ type:'mach/fetchMachParamInfo'});
                            }}
                            options={machParams.map(item=>({ value:item.metricsId, label:item.metricsName }))}
                        />
                        <CustomDatePicker onDispatch={()=>{
                            dispatch({ type:'mach/fetchMachEffInfo'});
                            dispatch({ type:'mach/fetchMachParamInfo'});
                        }} />
                    </div>
                    <div className={style['card-container']} style={{ height:'calc( 100% - 40px )', padding:'1rem '}}>
                        
                        <div className={style['list-container']} style={{ width:'60%', height:'100px' }}>
                            {
                                effInfo.infoList && effInfo.infoList.length 
                                ?
                                effInfo.infoList.map((item, index)=>(
                                    <div 
                                        key={index} 
                                        className={style['list-item']}
                                        style={{ width:`calc( ( 100% - ${effInfo.infoList.length-1}rem )/${effInfo.infoList.length} )` }}
                                    >
                                        <div className={style['list-item-icon']}>{ item.title }</div>
                                        {
                                            item.children.map((sub, j)=>(
                                                <div key={j} style={{ alignSelf:j === item.children.length - 1 ? 'flex-start' : 'auto' }}>
                                                    <div className={style['sub-text']}>{ sub.text }</div>
                                                    <div className={style['text']}>{ sub.value }</div>
                                                    <div className={style['sub-text']}>{ sub.subText }</div>
                                                </div>
                                            ))
                                        }
                                    </div>
                                ))
                                :
                                null
                            }
                        </div>
                        <div style={{ height:'calc( 100% - 100px - 1rem )' }}>
                            <EffLineChart data={paramInfo} currentParam={currentParam} />
                        </div>
                    </div>

                </div>
        </div>
    )
}

export default connect(({ user, mach })=>({ user, mach }))(EffManager);